<template>
  <div class="nei">
    <div class="box1">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">教学设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备挂失</el-breadcrumb-item>

      </el-breadcrumb>
      <h2 style="margin-top: 15px;">挂失记录</h2>
      <!-- <div>
        <input type="text" placeholder="用户名">
        <el-button @click="change">查询</el-button>
      </div> -->
      <div style="margin-top: 25px;">
        <el-row>
          <el-col :span="24">
            <div class="grid-content  contentTitle">
              <el-button class="add" type="primary" icon="el-icon-plus" @click="handleAdd">普通挂失</el-button>
              <el-input class="goIn" v-model="input" placeholder="请输入编码或名称"></el-input>



              <el-button type="primary" @click="getList" class="contentTitleSearch">查询</el-button>

              <div class="dr">

                <el-button type="primary" plain>导出excel</el-button>
              </div>
            </div>
          </el-col>

        </el-row>
      </div>

      <!-- 显示用户数据 -->
      <div class="content">
        <el-table :data="facilityLoseList"  stripe style="width: 100%"
          @selection-change="handleSelectionChangeDepartment">
          <el-table-column type="selection" width="50" header-align="center" align="center"> </el-table-column>

          <el-table-column prop="className" label="分类" width="180" header-align="center" align="center">
          </el-table-column>

          <el-table-column prop="facilityName" label="名称" width="120" header-align="center" align="center">
          </el-table-column>

          <el-table-column prop="facilityEncoding" label="编码" width="150" header-align="center"
            align="center"></el-table-column>

          <el-table-column prop="facilityPrice" label="单价" width="150" header-align="center"
            align="center"></el-table-column>

          <el-table-column prop="loseNum" label="挂失数量" width="150" header-align="center" align="center"></el-table-column>

          <el-table-column prop="facilitySpecification" label="规格" width="150" header-align="center"
            align="center"></el-table-column>

          <el-table-column prop="loseState" label="挂失类型" width="150" header-align="center"
            align="center"></el-table-column>

          <el-table-column prop="state" label="审批状态" width="150" header-align="center" align="center">
             <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 0" type="success">已通过</el-tag>
                    <el-tag v-else-if="scope.row.state == 2 || scope.row.state == 4" type="info">审核中</el-tag>
                    <el-tag v-else-if="scope.row.state == 1 || scope.row.state == 3" type="danger">已拒绝</el-tag>
                    <el-tag v-else="scope.row.state == 5" type="warning">已撤回</el-tag>
                  </template>
          </el-table-column>

          <el-table-column prop="loseTime" label="挂失时间" width="150" header-align="center"
            align="center"></el-table-column>


          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="warning" circle class="el-icon-search" @click="lookDialog(scope.row)"></el-button>
              <el-button type="primary" icon="el-icon-edit" circle @click="editDialog(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="removeHouseById(scope.row.flid)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 批量删除以及分页 -->
      <el-row style="margin-top: 18px;">
        <el-col :span="24">
          <div class="grid-content  bottomDelete">
            <el-button type="danger" @click="removeHouseByIds" style="float: left;border-radius: 8px;">批量删除</el-button>
            <el-footer style="float: right;">
              <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize">
              </el-pagination>
            </el-footer>
          </div>
        </el-col>

      </el-row>

      <!-- 新增模态框 -->
      <el-dialog title="新增报修" :visible.sync="dialogFormVisible" width="60%">
        <div class="addLoseBox">
          <el-form :model="searchForm">
            <el-form-item label="查询区域：" :label-width="formLabelWidth">
              <el-input v-model="searchForm.facilityName" placeholder="请输入编码或名称" style="width: 150px"></el-input>
              <el-button type="primary" class="chaXun" style="background-color: #3f3f65">查询</el-button>
            </el-form-item>
            <el-form-item label="信息显示：" :label-width="formLabelWidth">
              <el-table :data="getAddlist" tooltip-effect="dark" style="width: 100%" height="350"
                @selection-change="handleSelectionChangeAdd">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="className" label="分类" width="150">
                </el-table-column>
                <el-table-column prop="facilityName" label="名称" width="80">
                </el-table-column>
                <el-table-column prop="facilityEncoding" label="编码" width="80">
                </el-table-column>
                <el-table-column prop="facilityPrice" label="单价（元）" width="100">
                </el-table-column>
                <el-table-column prop="leaseNum" label="数量" width="80">
                </el-table-column>
                <el-table-column prop="facilitySpecification" label="规格" width="80">
                </el-table-column>
                <el-table-column prop="storageSite" label="存放地点" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="leaseTime" label="借出时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="报修数量" width="200" placeholder="选择日期" fixed="right" header-align="center"
                  align="center">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.loseNum" @change="handleChange" :min="1" :max="scope.row.leaseNum"
                      label="描述文字"></el-input-number>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <div>
              <el-form-item label="故障原因：" :label-width="formLabelWidth">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="SeedetailsForm.scrapDesc">
                </el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleAddSure()">确 定</el-button>
          </div>
        </div>
      </el-dialog>


      <!-- 修改 -->
      <el-dialog title="编辑挂失" :visible.sync="iconFormVisible" width="650px" center>
        <el-form :model="editForm" ref="editFormRef" center>
          <el-form-item label="分类:" class="addContent" :label-width="formLabelWidth">
            <el-input v-model="editForm.className" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="名称:" class="addContent" :label-width="formLabelWidth">
            <el-input v-model="editForm.facilityName" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="编码:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="editForm.facilityEncoding" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="单价:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="editForm.facilityPrice" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="挂失数量:" class="addContent" :label-width="formLabelWidth">
            <el-input v-model="editForm.loseNum" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="规格:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="editForm.facilitySpecification" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="挂失类型:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="editForm.loseState" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="审批状态:" class="addHouseArea" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="editForm.state" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>

          <el-form-item label="挂失时间:" class="addHouseArea" :label-width="formLabelWidth">
            <el-input v-model="editForm.loseTime" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>

          <el-form-item label="挂失原因:" class="addContent" :label-width="formLabelWidth">
            <el-input v-model="editForm.loseCause" type="textarea" :rows="4" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="iconFormVisible = false">取 消</el-button>
          <el-button @click="editHouse" type="primary">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 查看详情 -->
      <el-dialog title="挂失详情" :visible.sync="dialogVisible" width="650px" center>
        <el-form :model="lookForm" ref="lookFormRef" center>
          <el-form-item label="分类:" class="addContent" :label-width="formLabelWidth">
            <el-input v-model="lookForm.className" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="名称:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.facilityName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="编码:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.facilityEncoding" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单价:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.facilityPrice" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="挂失数量:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.loseNum" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="规格:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.facilitySpecification" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="挂失类型:" class="addContent" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.loseState" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="审批状态:" class="addHouseArea" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.state" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="挂失时间:" class="addHouseArea" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="lookForm.loseTime" autocomplete="off" placeholder="㎡"></el-input>
          </el-form-item>

          <el-form-item label="丢失原因:" class="addContent" :label-width="formLabelWidth">
            <el-input v-model="lookForm.loseCause" type="textarea" :rows="4" autocomplete="off"
              :disabled="true"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="dialogVisible = false" type="primary">确 定</el-button>
        </div>
      </el-dialog>


    </div>

  </div>
</template>
    
<script>
import { mapGetters, mapActions } from 'vuex';
import axios from '../../utils/axios';
import ProcessTime from "./../../utils/timechuli";

export default {

  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 50,
      addCurrentPage: 1,
      addPageSize: 10,
      addTotal: 50,
      dialogFormVisible: false,//添加对话框显示
      iconFormVisible: false,//编辑对话框显示
      dialogVisible: false,//查看详情对话框显示
      input: '',
      value1: '',
      value2: '',
      formLabelWidth: "120px",
      radio: '1',
      options: [{
        value: "0",
        label: '集体所有房产'
      }, {
        value: "1",
        label: '私有房产'
      }, {
        value: "2",
        label: '联营企业房产'
      }],
      value: '',
      //数据展示
      facilityLoseList: [],
      //添加模态框的数据
      housePropertyList: [],
      //选择的批量删除
      deleteData: [],
      //选择的批量添加
      addData: [],
      //添加表单数据
      searchForm: {
        facilityName: "",
        facilityEncoding: "",
        repairsTime: "",
        maintainTime: "",
        returnState: ''
      },
      SeedetailsForm: {
        className: "",
        facilityEncoding: 0,
        facilityName: "",
        facilityPrice: 0,
        facilitySpecification: "",
        id: 0,
        maintainExpend: 0,
        maintainState: "",
        maintainTime: "",
        repairsDesc: "",
        repairsNum: 0,
        repairsTime: "",
        state: 0,
        storageSite: ""
      },
      //修改数据
      editForm: {
        loseNum: '',
        loseTime: '',
        loseCause: ''

      },
      //查看
      lookForm: {
        className: '',
        facilityName: '',
        facilityEncoding: '',
        facilityPrice: '',
        loseNum: '',
        facilitySpecification: '',
        loseState: '',
        state: '',
        loseTime: '',
        loseCause: '',
      }
    };
  },
  //   发起请求
  methods: {
    ...mapActions(["setTest", "leasePage"]),
    handleChange(value) {
      console.log(value);
      this.$forceUpdate();  //强制刷新
    },
    getTest() {
      let res = this.getTest(this.id);
      if (res.code == 200) {
        alert("成功")
      }
    },
    //添加按钮
    handleAdd() {
      console.log("inner");
      this.searchForm.returnState = "hh"
      this.leasePage({
        page: 1,
        limit: this.pageSize,
        facilityName: this.searchForm.facilityName,
        repairsTime: this.searchForm.repairsTime,
        returnState: this.searchForm.returnState
      }).then(() => {
        this.dialogFormVisible = true
        console.log("getAddlist", this.getAddlist);
      })
    },
    //数据展示
    getList() {
      this.$axios.post('facility/lose/page', { "limit": 10, "page": 1, facilityName: this.input, loseStartTime: this.value1, loseEndTime: this.value2 }).then((r) => {
        console.log(r.data.data);
        this.facilityLoseList = r.data.data;
        this.total = r.data.count
      })
    },
    //添加模态框里的数据

    //分页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log("当前页码", currentPage);
      axios({
        url: 'facility/lose/page',
        method: 'post',
        data: { "page": 1, "limit": this.pageSize }
      }).then((r) => {
        console.log(r.data.data);
        this.facilityLoseList = r.data.data
      })
    },
    //pageSize改变事件
    handleSizeChange(currentPage) {
      console.log(currentPage);
      this.pageSize = currentPage;
      // this.getList();
    },


    //添加分页事件
    addHandleCurrentChange(addCurrentPage) {
      this.addCurrentPage = addCurrentPage;
      console.log("当前页码", addCurrentPage);
      axios({
        url: 'houseProperty/registration/page',
        method: 'post',
        data: { "page": this.currentPage, "limit": this.addPageSize }
      }).then((r) => {
        console.log(r.data.data);
        this.housePropertyList = r.data.data
      })
    },

    //传输复选框的值

    //点击按钮，删除房产
    async removeHouseById(flid) {
      console.log(flid);
      //弹框确认
      const confirmResult = await this.$confirm('此操作将永久删除该房产, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      });
      //确认删除返回confirm,取消返回cancel
      console.log(confirmResult);
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消删除')
      }
      console.log('确认删除');
      let id = flid;
      this.$axios.get('/facility/lose/delete/' + id).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success('删除成功！');
          this.handleCurrentChange();
          this.getList();
        }

      });
    },
    //批量删除
    //传输复选框的值
    handleSelectionChangeDepartment(val) {
      this.deleteData = val;
      console.log(val);
      let arr = []
      for (const key in val) {
        arr.push(val[key].flid)
      }
      console.log(arr);
      this.arrDel = arr
    },
    //批量删除
    async removeHouseByIds() {
      //判断有没有选择
      if (this.deleteData.length == 0) {
        this.$message.error("您还没有勾选房产");
        return
      };
      //创建一个空数组接受复选框的值
      let DeleteContent = [];
      for (let i = 0; i < this.deleteData.length; i++) {
        let j = this.deleteData[i];
        DeleteContent.push(j.flid)

      }
      let ids = this.arrDel
      console.log("this.arrDel", this.arrDel);
      const confirmResult = await this.$confirm('此操作将永久删除这些房产, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      });
      //确认删除返回confirm,取消返回cancel
      console.log(confirmResult);
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消删除')
      }
      console.log('确认删除');

      this.$axios.delete(`/facility/lose/batch/delete/${ids}`).then(res => {
        console.log(res);
      });
      this.$message.success('删除成功！');
      //重新渲染数据
      this.handleCurrentChange();
      this.getList();
      this.getList();

    },
    //修改模态框事件
    editDialog(flid) {
      console.log(flid);
      this.editForm = { ...flid };

      this.iconFormVisible = true;
      console.log(flid);
    },
    //修改房产信息并且提交
    editHouse() {
      this.$refs.editFormRef.validate(async valid => {
        console.log(valid);
        //发起请求
        let obj = { id: this.editForm.flid, loseNum: this.editForm.loseNum, loseCause: this.editForm.loseCause, loseTime: this.editForm.loseTime }
        console.log("请求数据", obj)
        const data = this.$axios.post('/facility/lose/Update', obj).then((res) => {
          console.log("响应", res.data);
          this.iconFormVisible = false;
          //刷新数据
          this.handleCurrentChange();
          this.getList();

        })
      })
      //提示成功
      this.$message.success('编辑房产成功！')
    },
    async handleAddSure(id) {
      console.log(id);
      if (id) {
        this.$message({
          message: '请选中需要添加的数据',
          type: "error",
          center: true
        })
      }
      let data = new Date(); // 获取当前时间
      console.log(data);
      let time = ProcessTime.msToDate(data)
      console.log(time);
      let list = []
      for (const key in this.addArray) {
        list.push({

          "facilityId": this.addArray[key].fid,
          "loseNum": this.addArray[key].loseNum,
          "loseCause": this.SeedetailsForm.scrapDesc,
          "loseTime": time,
          "loseInformer": this.aoId
        })
      };
      const { data: res } = await this.$axios.post('facility/lose/add', list);
      if (res.code !== 200) {
        console.log(res);
        this.$message.error('添加失败！')
      }
      console.log(res);
      this.$message.success('添加成功！');
      //添加框隐藏
      this.dialogFormVisible = false;
      //重新获取列表
      this.handleCurrentChange();
      this.getList();

    },
    //查看模态框事件
    lookDialog(fid) {
      console.log(fid);
      this.lookForm = fid

      this.dialogVisible = true;
      console.log(fid);
    },
    handleSelectionChangeAdd(value) { //模态添加选中的内容
      console.log("val", value);
      this.addArray = value

      // console.log(this.SeedetailsForm);
    },

  },
  mounted() {
    this.getList()

  },
  computed: {
    ...mapGetters(["getAddlist"]),
    aoId() {
      return localStorage.getItem('name');
    }

  },
  created() {
    this.getList()
  }

};
</script>
    
<style scoped>
.nei {

  width: 100%;

}

.box1 {
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title span {
  font-size: 16px;
  font-weight: 400;
}

.headimg {
  width: 30px;
  height: 30px;
  border-radius: 15px;
}

.add {
  padding: 12px;
  border-radius: 8px;
  background-color: #363b64;


}

.goIn {
  width: 350px;
  margin-left: 15px;
  height: 32px;
}

.goIn2 {
  width: 350px;

  height: 32px;
}

.goDate {
  width: 200px;
}

.content {
  margin-top: 20px;
  width: 100%;
}

.dr {
  float: right;
  margin-left: 20px;
}

.contentTitle {
  overflow: hidden;
}

.contentTitle2 {
  overflow: hidden;
  margin-top: 15px;
}

.change {
  font-size: 14px;
  font-weight: 400;
  margin-left: 20px;
}

.change2 {
  font-size: 14px;
  font-weight: 400;
}

.contentTitleSearch {
  margin-left: 20px;
}

.addContent {
  width: 420px;
  margin-left: 80px;
}

.addHouseArea {
  width: 350px;
  margin-left: 80px;
}

.bottomDelete {
  overflow: hidden;
}

.reason {
  width: 500px;
}
</style>
    